App.PlenoDocumentStore = new Opal.Store({
    fields: ["id","name","description","category","image","created_at","updated_at"],
    url: App.contextPath + "/documents",
    paginate: true
});

App.PlenoDocumentView = new Opal.View({
    templateName: "#documents-template",
    rootElement: "#agenda-section-container"
});

App.PlenoDocumentPaginationView = new Opal.View({
    templateName: "#pagination",
    rootElement: ".documents-pagination"
});

PlenoDocumentController = Opal.Controller.extend({
    
    init: function (params) {
        this._super();
        this.reload(params);
    },
    paginate: function(page) {
        App.PlenoDocumentController.reload({
            page: page
        });
    },
    reload: function(params,callback) {
        App.PlenoDocumentView.showLoader();
        App.PlenoDocumentStore.load(params,function(data) {
           App.PlenoDocumentView.hideLoader();
           App.PlenoDocumentView.context = { 
               category_id: data.category_id,
               category_code: data.category_code,
               category_name: data.category_name,
               documents: data.entries 
           };
           App.PlenoDocumentView.show("clean-append");
           
           App.PlenoDocumentPaginationView.context = {
               currentPage: data.currentPage,
               perPage: data.perPage,
               totalEntries: data.totalEntries
           };
           App.DocumentPaginationView.show("clean-append");
           
           if (callback != undefined) {
               callback();
           }
        });
    }
});

function paginate(page) {
    App.PlenoDocumentController.paginate(page);
}